<script setup>
import { ref, onMounted, inject } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { BREADCRUMBS, SEX_OPTIONS, AVATAR } from "@/plugins/global";

const axios = inject('axios'), route = useRoute();

onMounted(() => {
  BREADCRUMBS.splice(0, BREADCRUMBS.length,
    { label: '客户列表', path: '/home/customer_list' },
    { label: '客户详情', path: '/home/customer_detail' }
  );
  getCustomer();
});

// ---- 获取客户。
const customerUpdateEdit = ref(true), customer = ref({
  "customerId": null,
  "customerAccount": null,
  "phoneNumber": null,
  "name": null,
  "sex": -1,
  "birthdayStr": null,
  "avatar": AVATAR
});
const getCustomer = () => {
  customerUpdateEdit.value = true;
  axios.get(`/api/cms-web/customer/get/universe?customerId=${route.params.customerId}`).then(response => {
    if (response.data.success) {
      customer.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  });
}

// ---- 更新客户：请求接口更新客户，隐藏更新弹窗。
const customerViewFormRef = ref(null), customerViewFormRules = ref({
  customerId: [{ required: true, message: '请输入ID！', trigger: 'blur' }],
  customerAccount: [{ required: true, message: '请输入账号！', trigger: 'blur' }],
  name: [{ required: true, message: '请输入名称！', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '请输入手机号码！', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入性别！', trigger: 'blur' }]
});
const updateCustomer = () => {
  customerViewFormRef.value.validate((valid) => {
    if (valid) {
      axios.put('/api/cms-web/customer/update', {
        "customerId": customer.value.customerId,
        "phoneNumber": customer.value.phoneNumber,
        "name": customer.value.name,
        "sex": customer.value.sex,
        "birthdayStr": customer.value.birthdayStr,
        "avatar": customer.value.avatar
      }).then(response => {
        if (response.data.success) {
          ElMessage.success('更新成功！');
          customerUpdateEdit.value = true;
        } else {
          ElMessage.error(response.data.message);
        }
      });
    }
  });
}
</script>

<template>
  <div class="customer-detail-page-div-class">
    <div class="customer-view-form-div-class">
      <el-form ref="customerViewFormRef" :model="customer" :rules="customerViewFormRules" label-position="top"
        require-asterisk-position="right">
        <div style="padding-bottom: 30px; text-align: center;">
          <el-avatar :size="120" :src="customer.avatar" />
        </div>
        <div class="customer-view-form-items-div-class">
          <el-form-item label="ID" prop="customerId">
            <el-input v-model="customer.customerId" style="width: 200px" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="账号" prop="customerAccount">
            <el-input v-model="customer.customerAccount" style="width: 200px" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="customer.name" style="width: 200px" autocomplete="off" :disabled="customerUpdateEdit" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="customer.phoneNumber" style="width: 200px" autocomplete="off"
              :disabled="customerUpdateEdit" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="customer.sex" placeholder="选择" style="width: 200px" :disabled="customerUpdateEdit">
              <el-option v-for="item in SEX_OPTIONS" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birthdayStr">
            <el-date-picker v-model="customer.birthdayStr" type="date" style="width: 200px" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" :disabled="customerUpdateEdit" />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="customer-update-div-class">
      <el-button v-if="customerUpdateEdit" style="width: 100px;" @click="customerUpdateEdit = false">编辑</el-button>
      <div v-else>
        <el-button style="width: 100px;" @click="getCustomer()">取消</el-button>
        <el-button type="primary" style="width: 100px;" @click="updateCustomer()">更新</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.customer-detail-page-div-class {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 20px 20px 20px 20px;
}

.customer-view-form-div-class {
  flex: 1;
  width: 100%;
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid rgb(171, 164, 164);
  background-color: rgba(237, 237, 237, 0.202);
}

.customer-view-form-items-div-class {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.customer-update-div-class {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 5.5%;
  padding-right: 10px;
}
</style>
